<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      {{type===1?'批量修改层级':'修改用户层级'}}
    </template>
    <el-form :inline="true" :model="form" ref="refForm">
      <el-form-item :label="type===1?'层级统一修改为：':'层级修改为'">
        <el-select v-model="form.levelId" placeholder="请选择层级">
          <el-option
            v-for="item in levelList"
            :label="item.name"
            :key="item.id"
            :value="item.levelId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否锁定层级：">
        <el-checkbox v-model="form.status" disabled>锁定</el-checkbox>
      </el-form-item>
    </el-form>
    <el-table
      v-if="!!idList"
      class="el-table-align-center"
      :data="idList"
      border
      ref="table"
      v-loading="loading"
      max-height="250"
      element-loading-text="加载中..."
    @selection-change="handleSelectionChange">
    <el-table-column v-if="type==1"
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="注册时间" prop="registerDate">
        <template slot-scope="{row}">
          {{ row.registerDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="当前层级" prop="levelName"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitModify" :loading="loading">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getUserLevelList,
  lockUserLevel,
} from '@/services/api/userLevel';

import { form, grid } from '@/build';

export default {

  name: 'member-level-dialog',

  props: ['value', 'idList', 'type'],

  mixins: [form, grid],

  data() {
    return {
      selectList: [], // 选择调整列表
      levelList: [], // 层级list
      form: {
        levelId: '',
        status: true,
      },
      isSelectAll: false,
    };
  },
  watch: {
    value(val) {
      this.$nextTick(() => {
        if (val && this.$refs.table) {
          this.selectList = this.idList;
          this.idList.forEach((row) => {
            this.$refs.table.toggleRowSelection(row);
          });
          this.isSelectAll = true;
        }
      });
    },
  },
  mounted() {
    
    this.bindGet(getUserLevelList, 'levelList', {
      action: 'getLevel',
      sendingData:{'levelType':1}
    });
    this.doAction({ type: 'get', action: 'getLevel' });
  },
  methods: {
    cancel() {
      // this.resetForm('refForm'); // 不懂。不起作用
      this.clearForm();
      this.$emit('cancel');
      this.$refs.table.clearSelection();
    },
    // 提交表单
    submitModify() {
      const vm = this;
      const usernameArr = _.map(vm.selectList, 'username');
      const username = _.join(usernameArr, ',');
      const { levelId, status } = this.form;
      if (!levelId) {
        this.$message({
          type: 'warning',
          message: '请选择层级',
        });
        return;
      }
      if (!username) {
        this.$message({
          type: 'warning',
          message: '请选择用户',
        });
        return;
      }
      if (status) {
        lockUserLevel({ username, levelId }).then(([result, data]) => {
          if (result) {
            this.clearForm();
            // this.resetForm('refForm');
            this.$emit('input', false);
            this.$emit('submit');
            this.$refs.table.clearSelection();
            if(data.failNum && data.failNum > 0){
              this.$notify({
                type: 'error',
                message: data.failMessage,
              });
            }else {
              this.$notify({
                type: 'success',
                message: `${data.successNum}用户层级修改成功`,
              });
            }

            this.$parent.getAll();
          } else {
            this.$notify({
              type: 'error',
              message: `${data.message}`,
            });
          }
        });
      } else {
      // 目前是必须锁定才能修改层级
      }
    },
    handleSelectionChange(value) {
      if (this.isSelectAll) {
        this.selectList = value;
      }
    },
    clearForm() {
      this.form = {
        levelId: '',
        status: true,
      };
    },
  },
};
</script>

<style scoped>

</style>
